<template>
  <div class="side">
    <div class="side-head">1#调储罐液位</div>
    <div class="side-echarts1"></div>
    <div class="side-table1">
      <table >
        <tr class="title">
          <th>数据源</th>
          <th>液位</th>
          <th>时间</th>
        </tr>
         <tr v-if="this.$store.state.specialJointData.specialJointData" class="item">
          <td class="item-td">{{ this.$store.state.specialJointData.specialJointData[0].name }}</td>
          <td class="item-td">{{ this.$store.state.specialJointData.specialJointData[0].level[0] }}</td>
          <td class="item-td">{{ this.$store.state.specialJointData.specialJointData[0].time[0] }}</td>
        </tr>
        <tr v-else class="item">
          <td class="item-id">111</td>
          <td class="item-id">111</td>
          <td class="item-id">111</td>
        </tr>
        
        <tr class="item">
          <td class="item-td">{{ this.$store.state.specialJointData.specialJointData[0].name }}</td>
          <td class="item-td">{{ this.$store.state.specialJointData.specialJointData[0].level[1] }}</td>
          <td class="item-td">{{ this.$store.state.specialJointData.specialJointData[0].time[1] }}</td>
        </tr>
        <tr class="item">
          <td class="item-td">{{ this.$store.state.specialJointData.specialJointData[0].name }}</td>
          <td class="item-td">{{ this.$store.state.specialJointData.specialJointData[0].level[2] }}</td>
          <td class="item-td">{{ this.$store.state.specialJointData.specialJointData[0].time[2] }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import {getSpecialJointData} from '../../../utils/api.js'
export default {
  mounted() {
    this.$nextTick(()=>{
      this.initTable();
      setTimeout(()=>{
        this.initEcharts();
      },1000)
    })
  },
  data() {
    return {
      // 配置项
      option1: {
        // 标头
        legend: {
          data: ["1#调储罐液位"],
          textStyle: {
            fontSize: 20,
            color: "white",
          },
        },
        // 网格线位置
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // 保存为图片
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        // 拐点颜色
        itemStyle: {
          borderColor: "#E9CD4B",
        },
        // 字体颜色
        textStyle: {
          color: "#ff9d16",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "line",
            stack: "Total",
            name: "1#调储罐液位",
            // 显示数值
            itemStyle: { normal: { label: { show: true } } },
            // 线条颜色
            lineStyle: {
              width: 3,
              color: "#ff9d16",
            },
            // 阈值线
            markLine:{
              symble:'none', // 去掉箭头
              label:{
                show:false,
                position:'start',
                formatter:'{b}'
              },
              data:[
                {
                  name:"阈值",
                  yAxis:200
                }
              ],
              lineStyle:{
                color:'red'
              }
            }
          },
        ],
      },
    };
  },

  methods: {
    // 初始化表格
    async initEcharts() {
      var myChart = this.$echarts.init(
        document.querySelector(".side-echarts1")
      );

      // 动态设置x轴数据
      this.option1.xAxis.data = [
        this.$store.state.specialJointData.specialJointData[0].time[0],
        this.$store.state.specialJointData.specialJointData[0].time[1],
        this.$store.state.specialJointData.specialJointData[0].time[2],
        this.$store.state.specialJointData.specialJointData[0].time[3],
        this.$store.state.specialJointData.specialJointData[0].time[4],
        this.$store.state.specialJointData.specialJointData[0].time[5]];

      // 动态设置y轴数据
      this.option1.series[0].data = [
        this.$store.state.specialJointData.specialJointData[0].level[0],
        this.$store.state.specialJointData.specialJointData[0].level[1],
        this.$store.state.specialJointData.specialJointData[0].level[2],
        this.$store.state.specialJointData.specialJointData[0].level[3],
        this.$store.state.specialJointData.specialJointData[0].level[4],
        this.$store.state.specialJointData.specialJointData[0].level[5],
    ]

      console.log(this.option1.xAxis.data);
      myChart.setOption(this.option1);
      window.addEventListener('resize', function() {
        myChart.resize();
      })
    },
    // 初始化表格
    async initTable() {
      this.$store.state.specialJointData.specialJointData = await getSpecialJointData().catch(err=>{
        return console.err(err);
      })
      console.log(this.$store.state.specialJointData.specialJointData[0].name);
    }
  },
};
</script>

<style scoped>
/* 头部 */
.side-head {
  height: 50px;
  background-image: url(../../../assets/img/tankLevel1.svg);
  background-size: cover;
  background-repeat: no-repeat;

  padding-left: 10px;

  color: rgba(0, 255, 255, 1);
  font-size: 28px;
  font-family: Arial;
  line-height: 50px;
}
/* 图表 */
.side-echarts1 {
  width: 100%;
  height: 400px;
  /* background-color: pink; */
  
  margin-top: 20px;
  margin-bottom: 20px;
}
/* 表格 */
table{
  border-collapse: collapse;
  border-spacing: 0px;
  font-size: 12px;
}

table,th,td{
  border: 1px solid black;
}

th{
  width: 100vw;

  color: white;
}

.title{
  height: 40px;
}

.item{
  height: 40px;
  background-color: yellowgreen;
  
  text-align: center;
  color: red;
}

/* 偶数行 */
tr:nth-child(2n){
  background-color: #125a69;
}
/* 奇数行 */
tr:nth-child(2n + 1){
  background-color: #0e425b;
}
</style>